<template>
    <div>
        <mu-appbar color="primary" class="header-bar">
            <mu-button icon slot="left" @click="menuHandleClick()">
                <mu-icon value="menu"></mu-icon>
            </mu-button>
            <span slot="left">首页</span>
            <mu-avatar slot="right" size="30">
                <img src="@/assets/avatar.jpg" alt="">
            </mu-avatar>
        </mu-appbar>
        <left-slider ref="slider"></left-slider>
    </div>
</template>

<script>
import leftSlider from './leftSlider.vue'
export default {
    name: 'tabBar',
    components: {
        leftSlider
    },
    data(){
        return {}
    },
    mounted(){
    },
    destroyed(){
    },
    methods: {
        menuHandleClick(){
            this.$refs.slider.openSlider('openSlider')
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
    .header-bar
        position fixed
        top 0
        left 0
        right 0
        height .4rem
        z-index: 99
</style>
